<template>
  <div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan"></searchlist>
    </div>
    <div class="login-bloock" v-if="showlogin">
      <loginpop @bindlogin="loginbloock" @nickname="shownickname" :registershow="registertp"></loginpop>
    </div>
    <div class="header-block">
      <div class="header-body">
        <div class="header-logo pc-bk" @click="GoToindex">
          <!--<img src="../../../img/mobile/logo.jpg" alt="">-->
        </div>
        <!-- <div class="header-home pc-bk" @click="GoToindex" :class="{active: checkhome === 'TOP'}">
          首页
          <span class="line-bot"></span>
        </div> -->
        <div class="header-logo mobile-top" @click="GoToindex">
          <img src="../../../img/mobile/logo1.png" alt="">
        </div>
        <div class="header-tab" id="swiper-tab">
          <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(tablist,index) in tablist" v-if="tablist.id !== 'TOP'" :class="{active: checktab===tablist.id - 1}"><div class="swiper-block"><span class="line-bot"></span><span :data-id="tablist.id" @click="selectab">{{tablist.name}}</span></div></swiper-slide>
          </swiper>
        </div>
        <div class="header-tab" id="li-tab">
          <ul>
            <li :class="{active: checkhome === 'TOP'}" class="tabslist">
              <div class="swiper-block"  @click="GoToindex"><span class="line-bot"></span><span>首页</span></div>
            </li>
            <li class="tabslist" v-for="(tablist,index) in tablist" v-if="tablist.id !== 'TOP'" :class="{active: checktab===tablist.id - 1}">
              <div class="hover-tab pc-top">
                <div class="second-tab-bk">
                  <div class="second-tab-child">
                    <div class="tab-ele tab-ele-navname">
                      <!--<div class="navname-title">{{tablist.name}}</div>-->
                        <span class="second-title" v-bind:class="{'first': index === 0}" v-for="(hovertab, index) in tablist.list"  @mouseover="tabHover(hovertab)"  @click="moreBtn" :data-itemid="hovertab.news[0].id" :data-id="hovertab.id" :data-fid="tablist.id" :data-type="hovertab.content_type">{{hovertab.name}}</span>
                      <div class="clear"></div>
                    </div>
                    <div class="tab-ele tab-ele-article" v-bind:class="{'hidden':ishover}">
                      <!--<div class="navname-title">{{tablist.name}}推荐</div>-->
                      <div v-if="tablist.news.length > 0">
                        <div class="tab-ele-atr" v-for="hoverart in tablist.news" @click="linkDetail" :data-id="hoverart.id" :data-fid="tablist.id">
                          <div class="tab-img-block">
                            <div class="tab-ele-img" :style="{backgroundImage:'url(' + hoverart.cover_path + ')'}"></div>
                          </div>
                          <div class="tab-ele-note">{{hoverart.title}}</div>
                        </div>
                      </div>
                      <div class="empty-second" v-else>
                        暂无内容
                      </div>
                      <div class="tab-ele-hover"></div>
                    </div>
                    <div class="tab-ele tab-ele-recommend"  v-bind:class="{'hidden':!ishover}">
                      <!--<div class="navname-title">{{hovertitle}}</div>-->
                      <div v-if="navrecommend.length>0">
                        <ul>
                          <li v-for="navrcmd in navrecommend" @click="linkDetail" :data-id="navrcmd.id" :data-fid="tablist.id">
                            <div class="left-recommend-img" v-lazy:background-image="{src: navrcmd.cover_path, error: imgUrl, loading: imgUrl}">
                            </div>
                            <div class="right-recommend-info">
                              <div class="recommend-info-title">{{navrcmd.title}}</div>
                              <div class="right-content-note nav-content-note">
                                {{navrcmd.note}}
                              </div>
                            </div>
                            <div class="clear"></div>
                          </li>
                        </ul>
                      </div>
                      <div class="empty-second" v-else>
                        暂无内容
                      </div>
                    </div>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <!--<div class="swiper-block" v-if="tablist.id === 5" :data-id="tablist.id" :data-listid="tablist.list[0].news[0].id" @click="toIffDetail" @mouseover="outHover"><span class="line-bot"></span><span>{{tablist.name}}</span></div>
              <div class="swiper-block" v-else-if="tablist.id === 4" :data-id="tablist.id" :data-listid="tablist.list[0].news[0].id" @click="toIffDetail" @mouseover="outHover"><span class="line-bot"></span><span>{{tablist.name}}</span></div>-->
              <div class="swiper-block" :data-id="tablist.id" @click="selectab" @mouseover="outHover"><span class="line-bot"></span><span>{{tablist.name}}</span></div>
            </li>
            <div class="nav-login-search pc-bk">
              <div class="login-btn"  @click="toEng">Eng</div>
                <div v-if="!logining">
                <div class="login-btn"  @click="loginBtn">登录</div>
                <div class="login-btn"  @click="registerBtn">注册</div>
                </div>
                <div class="login-btn" @mouseover="showInfo" @mouseout="hideInfo" v-else>
                  <span class="username">{{nickname}}</span>
                  <div class="login-main" v-if="showuserinfo">
                    <ul>
                      <li class="login-info-list" v-for="userpage in userpages" :data-id="userpage.id" @click="toUserpage">
                        {{userpage.name}}
                      </li>
                      <li class="login-info-list" @click="signOut">
                        退出
                      </li>
                    </ul>
                  </div>
                </div>
              <div class="header-search">
              </div>
            </div>
          </ul>
        </div>
        <div class="header-search mobile-top" @click="searchBtn1">
          <img src="../../../img/mobile/nav.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import helper from '../../../utils/helper'
import api from '../../../utils/api'
import apiConfig from '../../../utils/apiconfig.js'
import { Indicator, MessageBox } from 'mint-ui'
import searchlist from './search'
import loginpop from '../components/login'
export default {
  data () {
    return {
      registertp: false,
      userpages: [
        {
          name: '个人设置',
          id: 1
        },
        {
          name: '收藏文章',
          id: 2
        }
      ],
      nickname: '',
      showuserinfo: false,
      logining: false,
      remeberme: true,
      ishover: false,
      istwo: false,
      tablist: [],
      tablistprop: [],
      checktab: 0,
      loading: false,
      showsearchlist: false,
      cover_path: '../../../img/mobile/banner.png',
      hovertitle: '',
      navrecommend: [],
      swiperOption:{},
      checkhome:'',
      phone: '',
      password: '',
      showlogin: false,
      showregister: false,
      forgetpwd: false
    }
  },
  created () {
    var mydata = sessionStorage.checktab
    var nickname = localStorage.nickname
    if (nickname) {
      this.logining = true
    }
    this.nickname = nickname
    if (mydata !== undefined) {
       this.checktab = parseInt(mydata)
     } else {
       this.checktab = 5
     }
    if (window.getTab) {
      this.getTabAction(window.getTab);
      return false
    }
    console.log(mydata)
    this.$nextTick(() => {
      this.getTablist(mydata)
    })
  },
  components: {
    searchlist,
      loginpop
  },
  methods: {
    signOut () {
      var param = {
        token: localStorage.token
      }
      console.log(param)
      MessageBox.confirm('确定执行此操作?').then(action => {
        api.GET(helper.getClientApiUrl(apiConfig.web.loginout), param, res => {
          this.logining = false
          localStorage.clear()
          window.location.reload()
        }, res => {
          console.log(res)
        })
      })
    },
    toUserpage (ele) {
      var id = ele.currentTarget.dataset.id
      this.$router.push('/home/userpage?id=' + id)
      window.location.reload()
    },
    loginbloock (val) {
      this.showlogin = val
    },
    shownickname (name) {
      this.logining = true
      this.nickname = name
    },
    showInfo () {
      this.showuserinfo = true
    },
    hideInfo () {
      this.showuserinfo = false
    },
    tabHover (ele) {
      this.ishover = true
      this.hovertitle = ele.name
      this.navrecommend = ele.news
      console.log(this.navrecommend)
    },
    outHover () {
      this.ishover = false
    },
    getTabAction(res){
      this.tablist = res
      this.tablistprop = res

      this.loading = false
    },
    getTablist (ele) {
      var tmp = Date.parse(new Date())
      tmp = tmp / 1000
      console.log(tmp)
      var param = {
        timestamp: tmp
      }
      this.params = param;
      api.GET(helper.getClientApiUrl(apiConfig.web.getTab), this.params, res => {
        window.getTab=res
       this.getTabAction(res);
       this.$emit('sectablist', this.tablist)
       if (ele !== undefined) {
         this.checktab = parseInt(ele)
       } else {
         this.checktab = this.tablist.length - 1
       }

      }, res => {
        console.log(res)
        Indicator.close()
      })
    },
    GoToindex () {
      this.$router.push('/')
      sessionStorage.removeItem('checktab')
    },
    moreBtn (e) {
      let conttype = e.currentTarget.dataset.type
      let fid = parseInt(e.currentTarget.dataset.fid)
      sessionStorage.setItem('checktab', fid - 1)
      if (conttype === 'AUTHOR') {
        this.$router.push('/home/authorlist?id=' + e.currentTarget.dataset.id)
        window.location.reload()
      } else if (conttype === 'NEWS_DETAIL' || conttype === 'SOURCE_DETAIL') {
          this.$router.push('/home/detail?id=' + e.currentTarget.dataset.itemid)
          window.location.reload()
      } else {
        this.$router.push('/home/list?id=' + e.currentTarget.dataset.id)
        window.location.reload()
      }
    },
    registerBtn () {
      var that = this
      console.log('re')
      this.showlogin = true
      that.registertp = true
    },
    loginBtn () {
      // MessageBox('提示', '功能正在上线中……')
      this.showlogin = true
      this.registertp = false
    },
    toEng () {
      sessionStorage.clear()
      window.location.href = 'http://en.iff.org.cn/'
    },
    searchBtn1 () {
      this.showsearchlist = true
    },
    searchlink (val) {
      this.showsearchlist = val
    },
    searchcan (val) {
      this.showsearchlist = val
    },
    toIffDetail (val) {
      this.checktab = parseInt(val.currentTarget.dataset.id) - 1
      sessionStorage.setItem('checktab', this.checktab)
      var detailid = val.currentTarget.dataset.listid
      this.$router.push('/home/detail?id=' + detailid)
      window.location.reload()
    },
    selectab (val) {
      console.log('test')
      // this.$router.push('/')
      if (val.currentTarget.dataset.id !== 'TOP') {
        this.checktab = parseInt(val.currentTarget.dataset.id) - 1
      } else {
        this.checktab = this.tablist.length - 1
      }
      sessionStorage.setItem('checktab', this.checktab)
      this.$router.push('/home')
    },
    linkDetail (e) {
      let fid = parseInt(e.currentTarget.dataset.fid)
      sessionStorage.setItem('checktab', fid - 1)
      console.log(e.currentTarget.dataset.id)
      this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id)
      window.location.reload()
    }
  }
}
</script>
